<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="2" :offset="18" :xl="{span: 2, offset: 19}">
          <el-button v-if="this.menuList.includes('schoolRoleAdd')" type="primary" size="medium" @click="addRoleFn">添加角色</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="24" class="centerTable">
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border :menuList="this.menuList">
          <el-table-column prop="role_name" label="角色管理" align="center">
            <template slot-scope="scope">
              <span v-if="scope.$index === 0">
                <el-input v-model="form.role_name" placeholder="请输入名称"></el-input>
              </span>
              <span v-else> {{scope.row.role_name}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="activated_name" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.$index === 0">
                <el-select v-model="form.activated" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </span>
              <span v-else> {{scope.row.activated_name}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="describe" label="权限说明" align="center"></el-table-column>
          <el-table-column prop="operation" label="操作" align="center">
            <template slot-scope="scope">
              <template v-if="scope.$index !==0">
                <el-button v-if="scope.row.is_system === 1 && menuList.includes('schoolRoleShow')" @click="examine('viewRole',scope.row)" type="text" size="small">查看权限</el-button>
                <el-button v-if="scope.row.is_system === 0 && menuList.includes('schoolRoleEdit')" @click="examine('edit',scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="scope.row.is_system === 0 && menuList.includes('schoolRoleDel')" @click="examine('del',scope.row)" type="text" size="small" class="dangerTextBtn">删除</el-button>
              </template>
              <template v-else>
                <el-button type="primary" round size="mini" @click="examine('search',scope.row)">查询</el-button>
                <el-button type="text" @click="examine('remove',scope.row)">清除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <br/>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import homeTab from '@/components/table.vue'
import {APISCHOOLROLELIST, APISCHOOLDELROLESTORE} from '@/common/api.js'
export default {
  components: {homeTab},
  data () {
    return {
      menuList: [],
      seacherTab: {
        role_name: '',
        activated: ''
      },
      tableData: [],
      options: [{
        label: '启用',
        value: 1
      }, {
        label: '禁用',
        value: 0
      }],
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        role_name: '',
        activated: ''
      },
      checkStr: ''
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.tableList()
  },
  methods: {
    tableList () { // 表格
      this.form.school_id = this.$route.query.id
      this.form.page = this.page
      APISCHOOLROLELIST(this.form).then((res) => {
        if (res.status === 1) {
          this.tableData = []
          this.tableData.push(this.seacherTab)
          res.data.list.forEach(element => {
            this.tableData.push(element)
          })
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.$message.error(res.msg)
          this.tableData = []
          this.tableData.push(this.seacherTab)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    examine (id, val) { // 按钮
      if (id === 'search') {
        this.tableList()
      } else if (id === 'remove') {
        this.form = []
        this.tableList()
      } else if (id === 'del') {
        this.delectFn(val)
      } else if (id === 'edit') {
        this.$router.push({path: './editSchoolRole', query: {id: this.$route.query.id, uid: val.id}})
      } else if (id === 'viewRole') {
        this.$router.push({path: './viewSchoolRole', query: {id: this.$route.query.id, uid: val.id}})
      }
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    delectFn (e) { // 删除
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APISCHOOLDELROLESTORE({
          id: e.id
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
            this.InIt()
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addRoleFn () {
      this.$router.push({path: './addSchoolRole', query: {id: this.$route.query.id}})
    }
  }
}
</script>
